<template>
  <div class="product-form">
    <el-form :model="form" label-width="120px">
      <!-- 各种表单项 -->

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="产品类型：">
            <el-radio-group v-model="form.productType">
              <el-radio value="反击破产品">反击破产品</el-radio>
              <el-radio value="鄂破产品">鄂破产品</el-radio>
              <el-radio value="圆锥类产品">圆锥类产品</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产品单位：">
            <el-input v-model="form.productUnit" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="产品分类：">
            <el-select v-model="form.productCategory" placeholder="下拉选择二级分类">
              <el-option
                v-for="item in categoryOptions"
                :key="item.id"
                :label="item.category_name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="型号：">
            <el-select v-model="form.model" placeholder="下拉选择已创建的型号">
              <el-option
                v-for="item in modelOptions"
                :key="item.id"
                :label="item.model_name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="规格条码：">
            <el-input v-model="form.specificationCode" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="规格编码：">
            <el-input v-model="form.specificationEncoding" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="品牌：">
            <el-select v-model="form.brand" placeholder="下拉选择">
              <el-option label="品牌一" value="brand1"></el-option>
              <el-option label="品牌二" value="brand2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="材质：">
            <el-select v-model="form.material" placeholder="下拉选择已创建的材质">
              <el-option
                v-for="item in materialOptions"
                :key="item.id"
                :label="item.material_name"
                :value="item.id">
              </el-option>

            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="单重：">
            <el-input v-model="form.weight" placeholder="请输入（kg）"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="外形尺寸：">
            <el-input v-model="form.dimensions" placeholder="请输入（毫米）"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="产品图号：">
            <el-input v-model="form.productDrawingNumber" placeholder="请输入 反击破产品为非必填，其他为必填"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工厂图号：">
            <el-input v-model="form.factoryDrawingNumber" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="原装图号：">
            <el-input v-model="form.originalDrawingNumber" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="库存：">
            <el-input v-model="form.inventory" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="价格：">
            <el-input v-model="form.price" placeholder="请输入">
              <template #append>$</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序：">
            <el-input v-model="form.sequence" placeholder="数字越大越靠前"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="低库存预警值：">
            <el-input v-model="form.lowStockAlert" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="高库存预警值：">
            <el-input v-model="form.highStockAlert" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="品牌资料：">
        <el-input type="textarea" v-model="form.brandInfo" placeholder="富文本"></el-input>
      </el-form-item>

      <el-form-item label="产品详情：">
        <el-input type="textarea" v-model="form.productDetails" placeholder="富文本"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
// 假设这是你的API请求函数
import { queryCategory } from '@/api/category.js';
import { queryProductModel } from '@/api/productmodel.js';
import { queryMaterial } from '@/api/material.js';


const form = ref({
  productType: '',
  productUnit: '',
  productName: '',
  coverImage: '',
  carouselImage: '',
  productCategory: '', // 改为字符串类型，用于存储单个值
  model: '',
  specificationCode: '',
  specificationEncoding: '',
  brand: '',
  material: '',
  weight: '',
  dimensions: '',
  productDrawingNumber: '',
  factoryDrawingNumber: '',
  originalDrawingNumber: '',
  inventory: '',
  price: '',
  sequence: '',
  lowStockAlert: '',
  highStockAlert: '',
  brandInfo: '',
  productDetails: ''
});

let categoryOptions = ref([]); // 初始化为空数组
let modelOptions = ref([]);
let materialOptions = ref([]);

/**
 * 初始化时获取数据
 */
onMounted(() => {
  getCategory();
  getProductModel();
  getMaterial();
});

/**
 * 获取供应商数据
 * @returns {Promise<void>}
 */
async function getCategory() {
  try {
    const res = await queryCategory();
    categoryOptions.value = res.data; // 更新options
  } catch (error) {
    console.error("Failed to fetch categories:", error);
  }
}
async function getMaterial() {
  try {
    const res = await queryMaterial();
    materialOptions.value = res.data; // 更新options
  } catch (error) {
    console.error("Failed to fetch materials:", error);
  }
}
async function getProductModel() {
  try {
    const res = await queryProductModel();
    modelOptions.value = res.data; // 更新options
  } catch (error) {
    console.error("Failed to fetch product models:", error);
  }
}

const handleCoverChange = (file) => {
  console.log('Cover Image:', file);
  // 添加文件上传逻辑...
};

const handleCarouselChange = (file) => {
  console.log('Carousel Image:', file);
  // 添加文件上传逻辑...
};
</script>

<style scoped>
.product-form {
  padding: 20px;
}
.el-form-item {
  margin-bottom: 20px;
}
</style>
